<template>
    <div class="content">
        <div class="zw-form-layout">
            <el-form ref="formRef" :model="form" label-width="auto">
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="版本号" prop="version">
                            <el-input v-model.trim="form.version" placeholder="请输入版本号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发布时间" prop="pubTime">
                            <el-date-picker
                                v-model="form.pubTime"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                @change="changeDateHandler" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" class="zw-form-btns">
                        <el-button type="primary" @click="queryHandler">查询</el-button>
                        <el-button plain @click="resetHandler">清空</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-row>
            <el-col class="zw-table-btns"> </el-col>
        </el-row>
        <el-table :data="tableList" :border="true" stripe>
            <el-table-column label="版本号" prop="version"></el-table-column>
            <el-table-column label="版本说明" prop="desc"></el-table-column>
            <el-table-column label="发版时间" prop="createTime"></el-table-column>
            <el-table-column label="可见商户">
                <template v-slot="{ row }">
                    <span>{{ row.visibleRange.length === 0 && row.isShow === 1 ? '全部商户' : '--' }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template v-slot="{ row }">
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        :content="row.failReason"
                        placement="top"
                        v-if="row.failReason">
                        <el-button class="el-button el-button--small is-disabled" @click="pushHandler(row)"
                            >推送</el-button
                        >
                    </el-tooltip>
                    <el-button class="table-btn" size="small" @click="pushHandler(row)" v-else> 推送 </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from 'vue';
import request from '@/request/index';
import { format, isNotEmpty, isEmpty, cloneDeep } from '@/commons/utils';
import { ElMessage } from 'element-plus';

const confirm = inject('confirm');
const form = reactive({
    version: '',
    pubTime: [],
    startTime: '',
    endTime: ''
});
let tableList = reactive([]);
let tableListBak = [];
const formRef = ref(null);

/**
 * 时间范围
 * @param {*} val
 */
const changeDateHandler = val => {
    if (val) {
        form.startTime = format(val[0], 'YYYY-MM-DD HH:mm:ss');
        form.endTime = format(val[1], 'YYYY-MM-DD') + ' 23:59:59';
    } else {
        form.startTime = '';
        form.endTime = '';
    }
};

/**
 * 分页查询
 */
const queryHandler = async () => {
    const res = await request('miniappListServ', form);
    const { list } = res.data;
    let filterList = [];
    if (isNotEmpty(form.version) || isNotEmpty(form.pubTime)) {
        filterList = list.filter(item => {
            if (isNotEmpty(form.version) && isEmpty(form.pubTime)) {
                return item.version === form.version;
            }
            if (isNotEmpty(form.pubTime) && isEmpty(form.version)) {
                return (
                    new Date(form.startTime).getTime() <= new Date(item.createTime).getTime() &&
                    new Date(form.endTime).getTime() >= new Date(item.createTime).getTime()
                );
            }
            if (isNotEmpty(form.version) && isNotEmpty(form.pubTime)) {
                return (
                    item.version === form.version &&
                    new Date(form.startTime).getTime() <= new Date(item.createTime).getTime() &&
                    new Date(form.endTime).getTime() >= new Date(item.createTime).getTime()
                );
            }
        });
    } else {
        filterList = list;
    }
    tableList.length = 0;
    tableList.push(...filterList);
};

/**
 * 重置
 */
const resetHandler = () => {
    formRef.value.resetFields();
    changeDateHandler();
    queryHandler();
};

/**
 * 推送
 * @param {*} row
 */
const pushHandler = async row => {
    try {
        if (
            await confirm(
                `<b>确认要将版本${row.version}推送给全部商户吗？</b>
                <p>推送后全部商户的小程序可选择升级至版本${row.version}，推送后不可撤销。</p>`,
                'warning',
                ``,
                true
            )
        ) {
            await request('miniappBatchPushServ', { templateId: row.templateId });
            ElMessage.success('操作成功');
            queryHandler();
        }
    } catch (e) {}
};

onMounted(async () => {
    queryHandler();
});
</script>
<style lang="scss" scoped>
.el-table {
    box-shadow: none;
    :deep(.el-table__empty-block) {
        border-bottom: 1px solid #eaeaea;
    }
}
</style>
